/* File Info
 * Author:      hutian
 * CreateTime:  2023/4/6 10:52:25
 * LastEditor:  hutian
 * ModifyTime:  2023/4/6 10:55:08
 * Description: 下拉框组件 需要请求数据时候用
*/
<template>
    <el-select v-model="value" clearable :placeholder="`请选择${props.placeholder}`" @change="change" filterable>
        <template #label="{ label, value, postName }">
            <span style="font-weight: bold">{{ label }}</span>
            <!-- <span> {{ postName }}</span> -->
        </template>
        <el-option v-for="item in list" :key="item.value" :label="item[`${props.fieldNames.label}`]"
            :value="item[`${props.fieldNames.value}`]">
            <div>
                <span style="float: left">{{ item[`${props.fieldNames.label}`] }}</span>
                <span style="float: right;color: var(--el-text-color-secondary); font-size: 13px;">
                    {{ item.postName }}
                </span>
            </div>
        </el-option>
    </el-select>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, useAttrs, getCurrentInstance, ComponentInternalInstance } from "vue";
/**
 * @description 父组件传入参数介绍
 * @param {srting} modelValue v-model 默认绑定的值
 * @param {Function} requestApi 获取下拉框数据 api 方法(必传)
 * @param {sting} placeholder 提示语 默认空字符
 * @param {Object} initParam 获取数据初始化参数(非必传，默认为{})
 * @param {Object} fieldNames 下拉框自定义labelm,value,是否回显lable的数据autoLable 默认false { label: "dictLabel", value: "dictValue",labelName:"dictName"，autoLable：false} labelName 回显的字段
 * @param {Object} data  父组件数据源 要赋值lable时候填
 * */
interface Props {
    modelValue: any,
    requestApi: (params: any) => Promise<any>;
    placeholder?: string,
    initParam?: any,
    fieldNames?: any
    data?: any,
    change: (value: any, list: any) => void
    [propName: string]: any
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<Props>(), {
    modelValue: undefined,
    placeholder: "",
    initParam: {},
    fieldNames: { label: "label", value: "value", autoLable: false, },
    data: {},
    change: () => { },
    //是否请求
    canRequest: true,
    optionSlot: false
});
// 获取attrs对象
const attrs = useAttrs();
const { proxy } = getCurrentInstance() as ComponentInternalInstance
// const props = defineProps(["modelValue"]);
const Emits = defineEmits(["update:modelValue"]);
const list = ref([]);
const findName =(value)=>{
    return 1111
}
const value = computed({
    //get方法返回值
    get: () => {
        // console.log("props",props)
        // if (props.modelValue) {
        //     return Number(props.modelValue);
        // }

        if ('multiple' in attrs) {
            console.log("props.modelValue", props.modelValue)
            return props.modelValue;
        } else {
            if ('allow-create' in attrs) {
                return props.modelValue;
            }
            if (props.modelValue) {
                // return Number(props.modelValue);
                return props.modelValue;
            }
        }


    },
    //set方法设置值
    set: (val) => {
        Emits('update:modelValue', val);
    }
})

function change(val: any) {
    if (props.change) {
        props.change(val, list.value)
    }
    if (props.fieldNames.autoLable) {
        let obj = list.value.find(item => {
            if (item[`${props.fieldNames.value}`] == val) return item[props.fieldNames.label]
        })
        props.data[`${props.fieldNames.labelName}`] = obj[props.fieldNames.label] ?? '';
    }
    Emits('update:modelValue', val)
}
//获取数据
const getList = async () => {
    let { rows, data } = await props.requestApi(props.initParam || { pageNum: 1, pageSize: 99999 });
    // let { rows, data } = await props.requestApi({ pageNum: 1, pageSize: 99999 });
    list.value = rows || data;
}

const getListParam = async (params) => {
    let { rows, data } = await props.requestApi(params);
    list.value = rows || data;
}
onMounted(() => {
    // console.log("props", props)
    // if(props.canRequest){
    //     getList();
    // }
    setTimeout(() => {
        proxy!.$forceUpdate()
    }, 4000);
    console.log("attrs", attrs)
    getList();
})
defineExpose({
    getListParam
});
</script>

<style scoped lang="scss"></style>
